<template>
  <el-drawer :modelValue="visible" :with-header="false" size="470px" @close="$emit('closed')">
    <!-- 计算列表 -->
    <div class="py-2 flex justify-between items-center">
      <div>
        <div class="flex gap-1 items-center">
          <ListMiddle theme="outline" size="16" fill="#2c3e50" />
          <h5 class="text-[16px] font-bold">参数列表</h5>
        </div>
        <span class="text-xs text-[#95a5a6] mt-1">最多只能创建5个计算参数</span>
      </div>

      <el-button type="success" size="small" @click="AddConfigVisible = true" round>
        <Plus thme="outline" size="16" fill="#fff" />
      </el-button>
    </div>

    <!-- 参数卡片 -->
    <div class="grid grid-rows-5 gap-[20px]">
      <div v-for="item of configs" :key="item.id">
        <ShowConfigCard :configId="item.id" />
      </div>
    </div>
  </el-drawer>

  <AddConfigDialog :visible="AddConfigVisible" :zoneId="zoneId" @closed="AddConfigVisible = false" />
</template>

<script setup lang="ts">
import { ListMiddle, Plus } from '@icon-park/vue-next'
import ShowConfigCard from './ConfigCard/ShowConfigCard/index.vue'
import AddConfigDialog from '@/components/dialog/AddConfig.vue'
import { ref } from 'vue'
import useCalculatePower from '@/composables/useCalculatePower'

const { visible, zoneId } = defineProps({
  visible: { type: Boolean, default: false },
  zoneId: { type: Number, default: 1 },
})

const emit = defineEmits(['closed'])

const { allConfig: findAllConig, configs } = useCalculatePower()
const AddConfigVisible = ref(false)

findAllConig({ zoneId })
</script>

<style></style>
